<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-body">
				<form class="layui-form" action="">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>集合字段内容</legend>
					</fieldset>
					<div class="layui-form-item">
						<label class="layui-form-label">集合前缀</label>
						<div class="layui-input-inline">
							<input type="text" name="chainCollPrefix" autocomplete="on" placeholder="请输入集合前缀"
								class="layui-input">
						</div>
						<label class="layui-form-label">集合后缀</label>
						<div class="layui-input-inline">
							<input type="text" name="chainCollSuffix" autocomplete="on" placeholder="请输入集合后缀"
								class="layui-input">
						</div>

					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">元素分隔符</label>
						<div class="layui-input-inline">
							<input type="text" name="chainCollElementSeparator" autocomplete="on"
								placeholder="请输入集合内元素分隔符" class="layui-input">
						</div>
						<label class="layui-form-label">集合内个数</label>
						<div class="layui-input-inline">
							<input type="text" name="chainCollElementCount" lay-verify="required" autocomplete="on"
								value="2" class="layui-input">
						</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>集合内字段内容</legend>
					</fieldset>
					<div class="layui-form-item">
						<label class="layui-form-label">子前缀</label>
						<div class="layui-input-inline">
							<input type="text" name="chainPrefix" autocomplete="on" placeholder="请输入前缀"
								class="layui-input">
						</div>
						<label class="layui-form-label">子后缀</label>
						<div class="layui-input-inline">
							<input type="text" name="chainSuffix" autocomplete="on" placeholder="请输入后缀"
								class="layui-input">
						</div>

					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">子分隔符</label>
						<div class="layui-input-inline">
							<input type="text" name="chainFiledSeparator" autocomplete="on" placeholder="请输入集合字段分隔符"
								class="layui-input">
						</div>
						<label class="layui-form-label">字段总数</label>
						<div class="layui-input-inline">
							<input type="text" name="chainCollCount" id="chain-coll-count" readonly="readonly" value="1"
								autocomplete="on" placeholder="请输入字段总数" class="layui-input">
						</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>集合字段内容</legend>
					</fieldset>
					<div id="file-chain-content">
						<div class="layui-form-item">
							<label class="layui-form-label">随机数据</label>
							<div class="layui-input-inline">
								<select id="chain-random-data-0" name="chainRandomData-0" lay-filter="chainRandomData">
									<option value="0" selected="">自定义字段内容</option>
									<option value="1">随机UUID</option>
									<option value="2">随机数字</option>
									<option value="3">随机金额</option>
									<option value="4">随机地址</option>
									<option value="5">随机邮箱</option>
									<option value="6">随机日期</option>
								</select>
							</div>
							<div id="chain-filed-content-0">
								<label class="layui-form-label">自定义内容</label>
								<div class="layui-input-inline">
									<input type="text" name="filedChainContent-0" autocomplete="on"
										placeholder="多个值可|分隔,随机选取一个" class="layui-input">
								</div>
							</div>

							<div id="chain-add-template-0">
							</div>

						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<div class="layui-btn-group">
								<button type="submit" class="layui-btn" lay-submit="" lay-filter="chain">提交</button>
								<button type="reset" class="layui-btn">重置</button>
								<button type="button" class="layui-btn" id="chain-field-add">增加</button>
								<button type="button" class="layui-btn" id="chain-field-delete">删除</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate', 'jquery', 'element'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					element = layui.element;

				$ = layui.jquery;
				var chainIndex = 1;
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				//提交表单
				form.on('submit(chain)', function(data) {
					let chainIndex = parent.$('#chain-index').val();
					parent.$('#filedChainContent-' + chainIndex).val(JSON.stringify(data.field))
					parent.layer.close(index);
				});

				$(document).on("click", "#chain-field-add", function() {
					var chainFiled = '<div class="layui-form-item" id="chain-filed-' + chainIndex + '">' +
						'<label class="layui-form-label">随机数据</label>' +
						'<div class="layui-input-inline">' +
						'<select name="chainRandomData-' + chainIndex + '" id="chain-random-data-' +
						chainIndex +
						'" lay-filter="chainRandomData">' +
						'<option value="0" selected="">自定义字段内容</option>' +
						'<option value="1">随机UUID</option>' +
						'<option value="2">随机数字</option>' +
						'<option value="3">随机金额</option>' +
						'<option value="4">随机地址</option>' +
						'<option value="5">随机邮箱</option>' +
						'<option value="6">随机日期</option>' +
						'</select>' +
						'</div>' +
						'<div id="chain-filed-content-' + chainIndex + '">' +
						'<label class="layui-form-label">自定义内容</label>' +
						'<div class="layui-input-inline">' +
						'<input type="text" name="filedChainContent-' + chainIndex +
						'" autocomplete="on" placeholder="多个值可|分隔,随机选取一个"' +
						'class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div id="chain-add-template-' + chainIndex + '"">' +
						'</div>' +
						'</div>';
					$('#file-chain-content').append(chainFiled);
					console.log("增加chain-filed: " + chainIndex)
					form.render();
					chainIndex++;
					$('#chain-coll-count').val(chainIndex);
				});

				//明细数据动态删除
				$(document).on("click", "#chain-field-delete", function() {
					if (chainIndex == 1) {
						return;
					}
					$('#chain-filed-' + (chainIndex - 1) + '').remove();
					console.log("删除chain-filed: " + (chainIndex - 1))
					form.render();
					chainIndex--;
					$('#chain-coll-count').val(chainIndex);
				});

				form.on('select(chainRandomData)', function(data) {
					let eleid = data.elem.id;
					let id = eleid.split("-")[3];
					$('#chain-add-template-' + id).empty();
					if (data.value == 1 || data.value == 2) {
						$('#chain-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据长度</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="chainFiledLength-' + id +
							'" autocomplete="on" placeholder="请输入长度"' +
							'class="layui-input">' +
							'</div>' +
							'<label class="layui-form-label">前后缀使用</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="filedChainAffix-' + id +
							'" autocomplete="on" placeholder="可为空,left|内容,或right|内容"class="layui-input">' +
							'</div>'
						$('#chain-add-template-' + id).append(div);
					} else if (data.value == 3) { //增加小数小数位选择
						$('#chain-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">整数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="chainAmount-' + id + '">' +
							'<option value="10">1</option>' +
							'<option value="100">2</option>' +
							'<option value="1000">3</option>' +
							'<option value="10000">4</option>' +
							'<option value="100000">5</option>' +
							'<option value="1000000">6</option>' +
							'<option value="10000000">7</option>' +
							'<option value="100000000">8</option>' +
							'</select>' +
							'</div>' +
							'<label class="layui-form-label">小数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="chainAmountNumber-' + id + '">' +
							'<option value="0" selected="">0</option>' +
							'<option value="1">1</option>' +
							'<option value="2">2</option>' +
							'<option value="3">3</option>' +
							'<option value="4">4</option>' +
							'<option value="5">5</option>' +
							'<option value="6">6</option>' +
							'<option value="7">7</option>' +
							'<option value="8">8</option>' +
							'</select>' +
							'</div>'

						$('#chain-add-template-' + id).append(div);
					} else if (data.value == 4 || data.value == 5) {
						$('#chain-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据长度</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="chainFiledLength-' + id +
							'" autocomplete="on" placeholder="请输入长度"' +
							'class="layui-input">' +
							'</div>';
						$('#chain-add-template-' + id).append(div);
					} else if (data.value == 6) { //动态增加日期选择框
						$('#chain-filed-content-' + id).hide();
						let dateformat = '<label class="layui-form-label">日期格式</label>' +
							'<div class="layui-input-inline">' +
							'<select name="chainRandomDate-' + id + '" id="chain-random-date-' + id +
							'" lay-filter="chainRandomDate">' +
							'<option value="yyyy-MM-dd" selected="">yyyy-MM-dd</option>' +
							'<option value="yyyyMMdd">yyyyMMdd</option>' +
							'<option value="yyyy-MM-dd HH:mm:ss">yyyy-MM-dd HH:mm:ss</option>' +
							'<option value="yyyy-MM-dd HH-mm-ss">yyyy-MM-dd HH-mm-ss</option>' +
							'<option value="yyyy-MM-ddHH:mm:ss">yyyy-MM-ddHH:mm:ss</option>' +
							'<option value="yyyy-MM-ddHH-mm-ss">yyyy-MM-ddHH-mm-ss</option>' +
							'<option value="yyyyMMddHHmmss">yyyyMMddHHmmss</option>' +
							'<option value="yyyy/MM/dd HH/mm/ss">yyyy/MM/dd HH/mm/ss</option>' +
							'<option value="yyyy/MM/ddHH/mm/ss">yyyy/MM/ddHH/mm/ss</option>' +
							'</select>' +
							'</div>'
						$('#chain-add-template-' + id).append(dateformat);

						let dateSelect = '<label class="layui-form-label">请选择日期</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" id="chain-filed-date-' + id + '" name="chainFiledDate-' + id +
							'" autocomplete="on" placeholder="例如yyyy-MM-dd"class="layui-input">' +
							'</div>';
						$('#chain-add-template-' + id).append(dateSelect);
					} else {
						$('#chain-filed-content-' + id).show();
					}
					form.render();

				});

				form.on('select(chainRandomDate)', function(data) {
					var eleid = data.elem.id;
					let id = eleid.split("-")[3];
					let val = data.value;
					$('#chain-filed-date-' + id).val("");
					if (val.search('H') != -1) {
						laydate.render({
							format: val,
							elem: '#chain-filed-date-' + id,
							type: 'datetime',
							show: true
						});
					} else {
						laydate.render({
							format: val,
							elem: '#chain-filed-date-' + id,
							type: 'date',
							show: true
						});
					}
				});

			});
		</script>
	</body>
</html>
